<template>
  <div class="vpd-device" :style="{
          width: val.w + 'px',
          height: val.h + 'px',
          border: val.borderWidth+ 'px solid '+val.borderColor,
          backgroundColor: val.backgroundColor
       }">

    <el-image slot="reference"
              :style="{
          width: (val.w-val.borderWidth*2) + 'px',
          height: (val.h-val.borderWidth*2-30) + 'px',
       }"
              :src="imgUrl"
              :fit="val.fit">
      <div slot="error" class="image-slot">
        <svg-icon icon-class="vpd-device"></svg-icon>
      </div>
    </el-image>
    <div class="device-name">
      {{label}}
    </div>
  </div>

</template>
<script>
  import StylePane from './style.vue';
  import dataMixin from '../mixins/data';


  const NAME = 'vpd-device';
  export default {
    mixins: [dataMixin],
    name: NAME,
    icon: 'vpd-device',
    title: '设备',
    panel: StylePane,
    setting: {
      type: NAME,
      dataType: 'text',
      x: 0,
      y: 0,
      w: 200,
      h: 230,
      minWidth: 40,
      minHeight: 40,
      fontSize: 14,
      backgroundColor: null,
      borderWidth: 0,
      borderColor: '#aaa',
      url: '',
      fit: 'contain', //确定图片如何适应到容器框，同原生 object-fit
      deviceId: null,
      deviceName: '设备'
    },
    props: {
      val: {
        type: Object
      }
    },
    data() {
      return {
        url: '',
        device: {},
      }
    },
    computed: {
      imgUrl() {
        return process.env.VUE_APP_BASE_API + (this.device.productImg || this.val.url);
      },
      label() {
        return this.device.name || this.val.deviceName;
      }
    },
    watch: {},
    mounted() {

    },
    methods: {
      updateData(data) {
        this.device = data;
      }
    }
  }
</script>
<style scoped>
  .vpd-device {
    font-size: 0;
  }

  .device-name {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: 500;

    text-align: center;
    background-color: #fff;
    overflow: hidden;
  }
</style>
